<template>
  <div>
    <wxc-tab-bar :tab-titles="tabTitles"
                 :tab-styles="tabStyles"
                 title-type="icon"
                 @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">

      <div class="item-container">
        <First></First>
      </div>

      <div class="item-container">
        <Second v-bind:parentMsg="todo"></Second>
      </div>


      <div class="item-container">
        <Third></Third>
      </div>


      <div class="item-container">
        <text>我的主页</text>
      </div>

    </wxc-tab-bar>
  </div>
</template>

<style scoped>
  .item-container {
    width: 750px;
    background-color: #f2f3f4;
  }
</style>

<script>
  import { WxcTabBar } from 'weex-ui'
  import First from './components/First.vue'
  import Second from './components/Second.vue'
  import Third from './components/Third.vue'

  import Config from './config'

  export default {
    components: { WxcTabBar, First, Second, Third },
    data () {
      return {
        tabTitles: Config.tabTitles,
        tabStyles: Config.tabStyles,
        todo: [{name: '123', id: 1}]
      }
    },
    created () {
      // const tabPageHeight = Utils.env.getPageHeight();
      // 如果页面没有导航栏，可以用下面这个计算高度的方法
      // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
      // const { tabStyles } = this;
      // this.contentStyle = { height: 0 + 'px' };
    },
    methods: {
      wxcTabBarCurrentTabSelected (e) {
        const index = e.page;
        // console.log(index);
      }
    }
  };
</script>


